{% load i18n request_extras humanize %}
<div class="row userrequest userrequest-{{ request.state|state_to_bs }}" data-request='{{ request.id }}'>
    <div class="col-md-10">
      <div class="row">
        <div class="col-md-12">
          {% if link %}
            <a class="userrequest-title" href="{% url 'userrequests:request-detail' request %}"> # {{ request.id }}</a>
          {% else %}
            <span class="userrequest-title"># {{ request.id }}
          {% endif %}
        </div>
      </div>
      <div class="row">
        <div class="col-md-4 userrequest-block border-right">
          <p><i class="fa fa-clock-o" ></i> <span class="tt" title="Total exposure time + observing overhead"> Duration: {{ request.duration }} seconds</span></p>
          <p><i class="fa fa-camera"></i> Instrument: {{ request.molecules.all.0.instrument_name|instrument_code_to_name }}</p>
        </div>
        <div class="col-md-4 userrequest-block border-right">
          <p>
            <span class="text-{{ request.state|state_to_bs }}">
              <i class="fa fa-{{ request.state|state_to_icon }}"></i>
              {{ request.state }}
            </span>
          </p>
          <p><i class="fa fa-calendar"></i> {{ request.modified}}</p>
        </div>
        <div class="col-md-4 userrequest-block border-right">
          <a href="{% url 'api:requests-detail' pk=request.id %}" class="btn btn-default btn-sm"><i class="fa fa-fw fa-code"></i> View in API</a>
          {% if request.state == 'COMPLETED' %}
          <button data-requestid="{{ request.id }}" class="downloadall btn btn-default btn-sm"><i class="fa fa-fw fa-download"></i> Download</button>
          {% endif %}
        </div>
      </div>
    </div>
    <div class="col-md-2">
      {% if request.state == 'COMPLETED' %}
      <div style="display: none; margin-top: 10px;"></div>
      <img src="" class="thumbnail-small center-block img-responsive" data-request="{{ request.id }}" style="display: none">
      {% elif request.state == 'PENDING' %}
      <br/>
      <div class="pending-details" data-request="{{ request.id }}"><i class="fa fa-spinner fa-spin"></i>
      </div>
      {% else %}
      {% endif %}
    </div>
</div>
